<!-- 用户操作回溯分析 -->
<template>
	<div class="app-container">
		<yd-form class="yd-form-wraper" :options="formOptions" :model="formData" @form-init="formInited" @search="formInited">
			<template #form-btn>
				<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
			</template>
		</yd-form>
		<!-- 操作概况 -->
		<div class="card">
			<el-row class="system-health-title">
				<el-col :span="23">
					<div class="circle"></div>
					<span class="title-label">用户操作概况</span>
				</el-col>
				<el-col :span="1">
					<el-button text size="small" :loading="downloading1" @click="exportOverview">
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</el-col>
			</el-row>
			<YdTable
				:formData="formDatas.overviewForm"
				:tableConfig="tableConfigs.operateOverviewConfig"
				:tableData="tableDatas.overviewData.data"
				@sizeChangeHandler="queryOverview"
				@currentChangeHandler="queryOverview"
				@sortChangeHandler="queryOverview"
			></YdTable>
		</div>
		<el-row v-show="showScatter" class="card mt10">
			<div style="width: 100%; height: 30px; display: flex; justify-content: space-between">
				<div>
					<div class="circle"></div>
					<span class="title-label">用户操作轨迹 -</span>
					<span class="title-label" :title="userName">
						{{ userName.length > 20 ? userName.substring(0, 20) + '...' : userName }}
					</span>
				</div>
				<el-tooltip content="展示业务名称" placement="top" class="switch-btn">
					<el-switch v-model="showBusinessName" :active-value="true" :inactive-value="false" @change="toggleSwitch"></el-switch>
				</el-tooltip>
			</div>
			<div v-loading="scatterLoading" ref="scatterChartRef" class="scatter-chart"></div>
		</el-row>
		<!-- 操作统计/操作详情 -->
		<div class="mt10">
			<el-row :gutter="10">
				<el-col :span="8">
					<div class="card">
						<el-row class="system-health-title">
							<el-col :span="22">
								<div class="circle"></div>
								<span class="title-label">操作统计 -</span>
								<span class="title-label" :title="userName">
									{{ userName.length > 10 ? userName.substring(0, 10) + '...' : userName }}
								</span>
								<span class="title-label">- {{ businessStatus1 }}</span>
							</el-col>
							<el-col :span="2" style="text-align: center">
								<el-button text size="small" :loading="downloading2" @click="exportStatistics">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</el-col>
						</el-row>
						<YdTable
							:formData="formDatas.statisticsForm"
							:tableConfig="tableConfigs.operateStatisticsConfig"
							:tableData="tableDatas.statisticsData.data"
							@sizeChangeHandler="queryStatistics"
							@currentChangeHandler="queryStatistics"
							@sortChangeHandler="queryStatistics"
						></YdTable>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="card">
						<el-row class="system-health-title">
							<el-col :span="22" class="all-title-overflow">
								<div class="circle"></div>
								<span class="title-label">操作详情 -</span>
								<span class="title-label" :title="userName">
									{{ userName.length > 10 ? userName.substring(0, 10) + '...' : userName }}
								</span>
								<span class="title-label" :title="businessName">
									<span v-if="businessName">- {{ businessName }} - </span>{{ businessStatus2 }}
								</span>
							</el-col>
							<el-col :span="2" style="text-align: center">
								<el-button text size="small" :loading="downloading3" @click="exportDetail">
									<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
								</el-button>
							</el-col>
						</el-row>
						<YdTable
							:formData="formDatas.detailForm"
							:tableConfig="tableConfigs.operateDetailConfig"
							:tableData="tableDatas.detailData.data"
							@sizeChangeHandler="queryOperateDetail"
							@currentChangeHandler="queryOperateDetail"
							@sortChangeHandler="queryOperateDetail"
						></YdTable>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup name="BusiUserOperate" lang="tsx">
import { onActivated, reactive, ref, shallowRef, getCurrentInstance, onMounted } from 'vue';
import * as echarts from 'echarts';
import { useRouter, useRoute } from 'vue-router';
// import { noDataOption } from '@/utils/common';
import { noDataOption } from '@/utils/defaultChartConfig';
import { downloadFromBlob, toDecimalFormate, parseTime } from '@/utils/common';
import {
	getUsersOperationsOverview,
	exportUsersOperationsOverview,
	getUserOperationsTrajectory,
	getUsersOperationsStatistics,
	exportUsersOperationsStatistics,
	getUsersOperationsDetail,
	exportUsersOperationsDetail,
} from '@/api/bpm/analysis/busi_user_operate';

const instance = getCurrentInstance();
const proxy = instance?.proxy;
const router = useRouter();
const route = useRoute();

// 表单配置
const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodes',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'businessCodes',
		label: '业务名称',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'select',
		prop: 'userStatus',
		label: '用户状态',
		children: [
			{
				label: '正常',
				value: 1,
			},
			{
				label: '异常',
				value: 0,
			},
		],
	},
	{
		type: 'select',
		prop: 'dataCenterList',
		label: '数据中心',
		isInitValue: false,
		api: {
			name: 'queryDataCenter',
		},
		// cascaders: [
		// 	{
		// 		cascadersParams: 'regionalCodes',
		// 		api: {
		// 			name: 'queryCityAreaOptions',
		// 		},
		// 	},
		// ],
	},
	// {
	// 	type: 'select',
	// 	prop: 'regionalCodes',
	// 	label: '归属城市',
	// 	attrs: {
	// 		multiple: true,
	// 	},
	// 	api: {
	// 		name: 'queryCityAreaOptions',
	// 	},
	// },
	{
		type: 'date-picker',
		prop: 'dateRange',
		span: 8,
		dateType: 'datetimerange',
		label: '时间范围',
		enableCrossDay: true,
	},
	{
		type: 'input',
		prop: 'userIdentify',
		label: '用户标识',
	},
]);

// 查询参数
const formData = reactive<FormModelType>({
	// regionalCodes: [],
	// dataCenterList: [],
	// businessCodes: [],
	// userStatus: '',
});

let cloneFormData: FormModelType = {};
// 业务选项
let businessCodesOptions = ref([]);
// 当前搜索条件
let currentForm = reactive({});
// 搜索表单数据
const formDatas = reactive<Record<string, FormModelType>>({
	// 操作概况
	overviewForm: {}, // 操作统计
	statisticsForm: {},
	//操作详情
	detailForm: {},
});

// 列表配置
const tableConfigs = reactive<Record<string, TableConfigType>>({
	// 操作概况列表配置
	operateOverviewConfig: {
		columns: [
			{
				label: '用户标识',
				prop: 'userIdentify',
			},
			{
				label: '用户名',
				prop: 'userName',
			},
			{
				label: '业务使用数量',
				prop: 'businessCount',
				sortable: true,
			},
			{
				label: '访问量',
				prop: 'visitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'visitCount',
						handler: (scope) => {
							businessStatus1.value = '访问量';
							searchStatistics(scope.row, 0);
						},
					},
				],
			},
			{
				label: '告警访问量',
				prop: 'alarmVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmVisitCount',
						color: '#ff9a0c',
						handler: (scope) => {
							businessStatus1.value = '告警访问量';
							searchStatistics(scope.row, 1);
						},
					},
				],
			},
			{
				label: '失败访问量',
				prop: 'failVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failVisitCount',
						color: '#fe5578',
						handler: (scope) => {
							businessStatus1.value = '失败访问量';
							searchStatistics(scope.row, 2);
						},
					},
				],
			},
			{
				label: '开始时间',
				prop: 'startTime',
				sortable: true,
			},
			{
				label: '结束时间',
				prop: 'endTime',
				sortable: true,
			},
			{
				label: '总办理时长',
				prop: 'dealTime',
				sortable: true,
				formatter(row, val) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '平均办理时长',
				prop: 'avgDealTime',
				sortable: true,
				formatter(row, val) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '用户操作轨迹图',
				prop: '',
				render: (row, val) => {
					const userIdentify = row.userIdentify;
					const userName = row.userName || row.userIdentify;
					const isActive = showScatter.value && userIdentify === scatterUser.value;
					return (
						<div onClick={() => toggleScatter(userIdentify, userName)} style={isActive ? 'cursor: pointer; color: #2beded;' : 'cursor: pointer;'}>
							<svg-icon icon-class={isActive ? 'eye-open' : 'eye'} style="margin-right: 6px;"></svg-icon>
						</div>
					);
				},
			},
		],
		pagination: {
			pageNum: 1,
			orderByColumn: 'visitCount',
		},
		loading: false,
	},
	// 用户操作统计列表配置
	operateStatisticsConfig: {
		columns: [
			{
				label: '业务名称',
				prop: 'businessName',
				width: 122,
			},
			{
				label: '访问量',
				prop: 'visitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'visitCount',
						handler: (scope) => {
							businessStatus2.value = '访问量';
							searchDetail(scope.row, 0);
						},
					},
				],
			},
			{
				label: '告警访问量',
				prop: 'alarmVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'alarmVisitCount',
						color: '#ff9a0c',
						handler: (scope) => {
							businessStatus2.value = '告警访问量';
							searchDetail(scope.row, 1);
						},
					},
				],
			},
			{
				label: '失败访问量',
				prop: 'failVisitCount',
				sortable: true,
				operation: [
					{
						rowKey: 'failVisitCount',
						color: '#fe5578',
						handler: (scope) => {
							businessStatus2.value = '失败访问量';
							searchDetail(scope.row, 2);
						},
					},
				],
			},
		],
		pagination: {
			pageNum: 1,
			orderByColumn: 'visitCount',
		},
		loading: false,
	},
	// 操作详情列表配置
	operateDetailConfig: {
		columns: [
			{
				label: '请求IP',
				prop: 'requestIp',
				sortable: true,
			},
			{
				label: '自定义返回码',
				prop: 'customResCode',
			},
			{
				label: '开始时间',
				prop: 'startTime',
				sortable: true,
			},
			{
				label: '结束时间',
				prop: 'endTime',
				sortable: true,
			},
			{
				label: '办理时长',
				prop: 'dealTime',
				sortable: true,
				formatter(row, val) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '业务状态',
				prop: 'isDealFail',
				width: 90,
			},
			{
				label: '完整性',
				prop: 'completionState',
				width: 75,
			},
			{
				label: '告警数',
				prop: 'alarmCount',
				renderXss: (row, val) => {
					return <span style="color: #fe5578">{val}</span>;
				},
				sortable: true,
			},
			{
				label: '专属指标',
				prop: 'exclusiveIndicator',
			},
			{
				label: '操作',
				prop: '',
				width: 70,
				operation: [
					{
						text: '详情',
						handler: (scope) => {
							router.push({
								path: '/business-monitor/monitor-analysis/user-operate-analysis-detail',
								query: {
									data: JSON.stringify({
										businessDetailId: scope.row.detailId,
										startTime: scope.row.startTime,
										endTime: scope.row.endTime,
										startTimeUsec: new Date(scope.row.startTime).getTime(),
										endTimeUsec: new Date(scope.row.endTime).getTime(),
									}),
								},
							});
						},
					},
				],
			},
		],
		pagination: {
			pageNum: 1,
		},
		loading: false,
	},
});
// 列表数据
const tableDatas = reactive({
	overviewData: {
		data: [],
	},
	// 用户操作统计数据
	statisticsData: {
		data: [],
	},
	detailData: {
		data: [],
	},
});

const scatterChartRef = ref(); //echart图实例
// 散点图数据
const series = ref<any[]>([]);
const labelArr = ref<any[]>([]);
const scatterChart = shallowRef();
// 散点图的展示状态
const showScatter = ref(false);
const showBusinessName = ref(false);
const scatterLoading = ref(false);
// 散点图当前展示的用户
const scatterUser = ref('');
// 列表标题名相关
const userIdentify = ref('');
const userName = ref('');
const systemName = ref('');
const businessName = ref('');
const businessStatus1 = ref('');
const businessStatus2 = ref('');
// 导出状态相关
const exportDisable1 = ref(false);
const downloading1 = ref(false);
const exportDisable2 = ref(false);
const downloading2 = ref(false);
const exportDisable3 = ref(false);
const downloading3 = ref(false);
// 操作统计额外参数
const extendStatistics = reactive<anyObj>({});
// 操作详情额外参数
const extendDetail = reactive<anyObj>({});
// 联动渲染表格参数
const firstRender = reactive<anyObj>({
	statistics: true,
	details: true,
});
// 跨天处理
const crossDayFlag = ref(false);
let inxObj = reactive<anyObj>({});
let totalLengthObj = reactive<anyObj>({});

// 初始化图形
const initChart = () => {
	if (!scatterChart.value) {
		scatterChart.value = echarts.init(scatterChartRef.value);
	}
};
// 图形自适应
const chartResize = () => {
	if (scatterChart.value) {
		scatterChart.value.resize();
	}
};

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
}

// 表单初始化成功
const formInited = () => {
	initQuery(route.query, formData);
	searchHandler();
};
initQuery(route.query, formData);

// 请求所有受搜索表单影响的数据
const searchHandler = () => {
	systemName.value = formData.systemId;
	// 请求用户操作概况数据
	showScatter.value = false;
	// 赋值当前搜索时间,因为表单时间最近一小时是实时更改,会导致下方两表数据不准确的假象
	currentForm = {
		...formData,
	};
	//列表数据
	tableDatas.overviewData.data = [];
	tableConfigs.operateOverviewConfig.pagination!.total = 0;
	tableDatas.statisticsData.data = [];
	tableConfigs.operateStatisticsConfig.pagination!.total = 0;
	tableDatas.detailData.data = [];
	tableConfigs.operateDetailConfig.pagination!.total = 0;
	//请求参数
	formDatas.overviewForm.pageNum = 1;
	formDatas.statisticsForm.pageNum = 1;
	formDatas.detailForm.pageNum = 1;
	firstRender.statistics = true;
	firstRender.details = true;
	queryOverview();
};

// 清空所有图表数据
const clearAll = () => {
	tableConfigs.operateOverviewConfig.pagination!.total = 0;
	tableConfigs.operateStatisticsConfig.pagination!.total = 0;
	tableConfigs.operateDetailConfig.pagination!.total = 0;
	tableDatas.overviewData.data = [];
	showScatter.value = false;
	userIdentify.value = '';
	businessName.value = '';
	businessStatus1.value = '';
	businessStatus2.value = '';
	tableDatas.statisticsData.data = [];
	exportDisable2.value = true;
	tableDatas.detailData.data = [];
	exportDisable3.value = true;
	formDatas.overviewForm.pageNum = 1;
	formDatas.statisticsForm.pageNum = 1;
	formDatas.detailForm.pageNum = 1;
};
// 获取操作概况列表数据
const queryOverview = () => {
	let overviewConfig = tableConfigs.operateOverviewConfig;
	overviewConfig.loading = true;
	getUsersOperationsOverview({
		...formData,
		...currentForm,
		...formDatas.overviewForm,
	}).then((res: ApiResponse) => {
		overviewConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			clearAll();
			return;
		}
		if (res.msg !== 'success') {
			proxy?.$message({
				message: res.msg,
				type: 'warning',
				duration: 5000,
			});
		}
		tableDatas.overviewData.data = res.data.data;
		console.log('tableDatas.overviewData.data', tableDatas.overviewData.data);
		overviewConfig.pagination!.total = res.data.total;
		if (overviewConfig.pagination?.total! <= 0) {
			if (overviewConfig.pagination?.total! == -1) {
				proxy?.$message.warning('当前查询时间表不存在/不在保存周期!');
			}
			exportDisable1.value = true;
			// 没有数据,清空所有相关图表
			clearAll();
		} else {
			exportDisable1.value = false;
			// 请求用户操作统计数据
			if (firstRender.statistics) {
				searchStatistics(tableDatas.overviewData.data[0], 0);
				businessStatus1.value = '访问量';
				firstRender.statistics = false;
			}
		}
	});
};
// 导出操作概况列表
const exportOverview = () => {
	const that = this;
	const d = JSON.parse(JSON.stringify(formData));
	d.isAsc = formDatas.overviewForm.isAsc;
	d.orderByColumn = formDatas.overviewForm.orderByColumn;
	downloading1.value = true;
	exportUsersOperationsOverview({
		...d,
		...currentForm,
	}).then((res) => {
		downloading1.value = false;
		downloadFromBlob(res, '用户操作概况列表').then((o) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
// 点击加载操作统计列表
const searchStatistics = (obj: any, businessStatus: any) => {
	userIdentify.value = obj.userIdentify;
	userName.value = obj.userName || obj.userIdentify;
	extendStatistics.userIdentify = userIdentify.value;
	extendStatistics.businessStatus = businessStatus;
	tableDatas.statisticsData.data = [];
	tableConfigs.operateStatisticsConfig.pagination!.total = 0;
	tableDatas.detailData.data = [];
	tableConfigs.operateDetailConfig.pagination!.total = 0;
	// tableDatas.detailData.total = 0;

	formDatas.statisticsForm.pageNum = 1;
	formDatas.detailForm.pageNum = 1;
	firstRender.details = true;
	queryStatistics();
};
// 切换显示/隐藏散点图
const toggleScatter = (userIdentify: any, userName1: any) => {
	// 展示的用户与当前行的用户不同,都应要展示且切换为当前行的用户
	if (userIdentify != scatterUser.value) {
		showScatter.value = true;
		scatterUser.value = userIdentify;
	} else {
		showScatter.value = !showScatter.value;
	}
	if (showScatter.value) {
		getUserOperaData(userIdentify);
		const obj = {
			userIdentify: userIdentify,
			userName: userName,
		};
		searchStatistics(obj, 0);
		businessStatus1.value = '访问量';
	}
	userName.value = userName1;
};
// 查询用户操作散点图数据
const getUserOperaData = (userIdentify: any) => {
	const d = JSON.parse(JSON.stringify(currentForm));
	d.userIdentify = userIdentify;
	scatterLoading.value = true;
	getUserOperationsTrajectory(d).then((res: ApiResponse) => {
		scatterLoading.value = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		if (res.msg !== 'success') {
			proxy?.$message({
				message: res.msg,
				type: 'warning',
				duration: 5000,
			});
		}
		const seriesCommon = {
			type: 'scatter',
			symbolSize: 11,
			label: {
				show: showBusinessName,
				position: 'bottom',
				color: '#ffffff',
				formatter: function (val: any) {
					if (val.seriesName.length < 10) {
						return val.seriesName;
					} else if (val.seriesName.length < 20) {
						return val.seriesName.substring(0, 10) + '\n' + val.seriesName.substring(10);
					} else {
						return val.seriesName.substring(0, 10) + '\n' + val.seriesName.substring(10, 20) + '...';
					}
				},
			},
		};
		labelArr.value = res.data.labelTimeList;
		let daysArr: any[] = [];
		labelArr.value.forEach((l: any) => {
			if (!daysArr.includes(l.substring(5, 10))) {
				daysArr.push(l.substring(5, 10));
			}
		});
		crossDayFlag.value = daysArr.length > 1;
		inxObj = {};
		totalLengthObj = {};
		let totalLength = 0;
		daysArr.forEach((d, index) => {
			let count = 0;
			labelArr.value.forEach((l: any) => {
				if (l.includes(d)) {
					count++;
				}
			});
			totalLength += count;
			if (index !== daysArr.length - 1) totalLengthObj[d] = totalLength;
			inxObj[d] = totalLength - count + Math.floor(count / 2);
		});
		series.value = [];
		res.data.resList.forEach((r: any) => {
			let dataArr: any[] = [];
			r.forEach((d: any) => {
				const t: string = parseTime(d.startTime, '{y}-{m}-{d} {h}:{i}:00');
				dataArr.push([labelArr.value.indexOf(t), Math.floor((d.dealTime / 1000000) * 100) / 100]);
			});
			series.value.push({
				name: r[0].businessName,
				...seriesCommon,
				data: dataArr,
			});
		});
		renderUserOperaChart();
	});
};
// 切换展示业务名称的按钮
const toggleSwitch = () => {
	series.value.forEach((s) => {
		s.label.show = showBusinessName;
	});
	renderUserOperaChart();
};
// 渲染用户操作散点图
const userOperaChartOption = ref('');
const renderUserOperaChart = () => {
	initChart();
	const myChart = scatterChart.value;
	myChart.clear();
	if (series.value.length <= 0) {
		noDataOption(myChart, {
			title: {},
		});

		return;
	}
	myChart.setOption({
		color: ['#2beded', '#ff915a', '#6d54f2', '#ef4b43', '#faff67', '#fc5678', '#1ec79a'],
		legend: {
			show: true,
			itemHeight: 12,
			itemWidth: 12,
			itemGap: 15,
			textStyle: {
				color: '#ffffff',
			},
		},
		tooltip: {
			trigger: 'item',
			confine: true,
			borderWidth: 1,
			borderColor: '#FFFFFF',
			backgroundColor: 'rgba(84, 140, 222, 0.35)',
			textStyle: {
				color: '#fff',
			},
			formatter: function (params: any) {
				return (
					params.seriesName +
					'<br/>' +
					params.name.substring(5, 10) +
					'&nbsp;&nbsp;' +
					params.name.substring(11, 16) +
					'<br/>' +
					'办理时长：' +
					params.value[1] +
					'秒'
				);
			},
		},
		grid: {
			containLabel: true,
			x: 20,
			x2: 25,
			y: 35,
			y2: 0,
		},
		xAxis: {
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)',
				},
			},
			// 不跨天展示时:分,跨天展示月-日
			axisLabel: {
				// textStyle: {
				color: 'rgba(250,250,250,0.8)',
				fontSize: 14,
				// },
				formatter: (value: any) => {
					if (crossDayFlag.value) {
						return value.substring(5, 10);
					}
					return value.substring(11, 16);
				},
				interval: crossDayFlag.value
					? (index: any, val: any) => {
							if (index == inxObj[val.substring(5, 10)]) {
								return true;
							}
							return false;
					  }
					: 'auto',
			},
			// 跨天查询时需要有分割线
			axisTick: {
				show: crossDayFlag.value,
				inside: true,
				length: 15,
				interval: (index: any, val: any) => {
					if (index == totalLengthObj[val.substring(5, 10)] - 1) {
						return true;
					}
					return false;
				},
			},
			splitLine: {
				show: !crossDayFlag.value,
				lineStyle: {
					color: 'rgba(255,255,255,0.2)',
				},
			},
			data: labelArr.value,
		},
		yAxis: {
			splitNumber: 6,
			name: '办理时长(秒)',
			nameTextStyle: {
				color: '#ffffff',
				fontSize: 15,
				padding: [0, 0, 0, 65],
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)',
				},
			},
			axisLabel: {
				// textStyle: {
				color: 'rgba(250,250,250,0.8)',
				fontSize: 14,
				// },
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)',
				},
			},
		},
		series: series.value,
	});
	// 默认显示第一个的 tooltip
	myChart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: 0,
	});
};
// 获取用户操作统计列表数据
const queryStatistics = () => {
	tableConfigs.operateStatisticsConfig.loading = true;
	getUsersOperationsStatistics({
		...formData,
		...currentForm,
		...formDatas.statisticsForm,
		...extendStatistics,
	}).then((res: ApiResponse) => {
		tableConfigs.operateStatisticsConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		if (res.msg !== 'success') {
			proxy?.$message({
				message: res.msg,
				type: 'warning',
				duration: 5000,
			});
		}
		tableDatas.statisticsData.data = res.data.data;
		tableConfigs.operateStatisticsConfig.pagination!.total = res.data.total;
		if (tableConfigs.operateStatisticsConfig.pagination?.total! <= 0) {
			exportDisable2.value = true;
			// 清空详情表相关数据
			businessName.value = '';
			businessStatus2.value = '';
			tableDatas.detailData.data = [];
			tableConfigs.operateDetailConfig.pagination!.total = 0;
			exportDisable3.value = true;
		} else {
			exportDisable2.value = false;
			//请求操作详情数据
			if (firstRender.details) {
				searchDetail(tableDatas.statisticsData.data[0], 0);
				businessStatus2.value = '访问量';
				firstRender.details = false;
			}
		}
	});
};
// 导出用户操作统计列表数据
const exportStatistics = () => {
	const that = this;
	const d = JSON.parse(JSON.stringify(formData));
	d.isAsc = formDatas.statisticsForm.isAsc;
	d.orderByColumn = formDatas.statisticsForm.orderByColumn;
	d.userName = userName;
	downloading2.value = true;
	exportUsersOperationsStatistics({
		...d,
		...currentForm,
		...extendStatistics,
	}).then((res) => {
		downloading2.value = false;
		downloadFromBlob(res, '操作统计列表').then((o) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
// 点击加载操作详情列表
const searchDetail = (obj: any, businessStatus: any) => {
	businessName.value = obj.businessName;
	(extendDetail.userIdentify = userIdentify.value),
		(extendDetail.businessCode = obj.businessCode),
		(extendDetail.businessStatus = businessStatus),
		(tableDatas.detailData.data = []);
	tableConfigs.operateDetailConfig.pagination!.total = 0;
	formDatas.detailForm.pageNum = 1;
	queryOperateDetail();
};
// 获取操作详情列表数据
const queryOperateDetail = () => {
	tableConfigs.operateDetailConfig.loading = true;
	getUsersOperationsDetail({
		...formData,
		...currentForm,
		...formDatas.detailForm,
		...extendDetail,
	}).then((res: ApiResponse) => {
		tableConfigs.operateDetailConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		if (res.msg !== 'success') {
			proxy?.$message({
				message: res.msg,
				type: 'warning',
				duration: 5000,
			});
		}
		if (res.data) {
			tableDatas.detailData.data = res.data.data;
			tableConfigs.operateDetailConfig.pagination!.total = res.data.total;
			if (tableConfigs.operateDetailConfig.pagination?.total! <= 0) {
				exportDisable3.value = true;
			} else {
				exportDisable3.value = false;
			}
		}
	});
};

const handlePickChange = (val: any) => {
	formData.startTime = val[0];
	formData.endTime = val[1];
};
const handleSysSelChange = (val: any) => {
	formData.systemId = val;
};

function handleBusiSelChange(val: any) {
	if (val.length == 1 && val[0] == '') {
		val = [];
	}
	formData.businessCodes = val;
}
function selectChange(key: any, val: any) {
	formData[key] = val;
}
function handleDataCenterSelChange(val: any) {
	if (val.length == 1 && val[0] == '') {
		val = [];
	}
	formData.dataCenterList = val;
}

function handleUserStatusSelChange(val: any) {
	if (val.length == 1 && val[0] == '') {
		val = [];
	}
	formData.userStatus = val;
}

function handleRegionalCodesSelChange(val: any) {
	if (val.length == 1 && val[0] == '') {
		val = [];
	}
	formData.regionalCodes = val;
}

// 导出操作详情列表数据
const exportDetail = () => {
	const that = this;
	const d = JSON.parse(JSON.stringify(formData));
	d.isAsc = formDatas.detailForm.isAsc;
	// d.orderByColumn = formDatas.detailForm.orderByColumn;
	downloading3.value = true;
	d.userName = userName;
	exportUsersOperationsDetail({
		...d,
		...currentForm,
		...extendDetail,
	}).then((res) => {
		downloading3.value = false;
		downloadFromBlob(res, '操作详情列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@mixin title-box {
	display: flex;
	align-items: center;
}

.circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	margin-right: 8px;
	background-color: #2beded;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	margin-bottom: 2px;
}

.title-label {
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
}

.user-title {
	display: inline-block;
	max-width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.all-title-overflow {
	width: 100%;
	color: #ffffff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.system-health-title {
	height: 36px;
	@include title-box;
}

.chart-title {
	height: 30px;
	@include title-box;
}

.card {
	background-color: rgba(29, 39, 75, 0.31);
	border: unset;
	border-radius: 12px;
	padding: 10px;
}

:deep(.table-select .el-select > .el-input) {
	display: block;
	width: 100%;
	background-color: #42567f;
}

:deep(.table-select .el-input__inner) {
	color: #ffffff;
	border: none;
	border-radius: 0;
	background-color: #42567f;
}

:deep(.table-select .el-select__input) {
	color: #ffffff;
}

.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff;
}

.scatter-chart {
	height: 300px;
	width: 100%;
}

.switch-btn {
	float: right;
	margin-right: 20px;
}
.mt10 {
	margin-top: 10px;
}
</style>
